<template>
	<div class="c2c">
		<hb-title :title="Lang.title[lang]"/>
		<div class="main flex">
			<c-left class="left" @select="select" :fvirtualcointypeList='fvirtualcointypeList'/>
			<c-right class="right" @selected="selected" :apigetList="apigetList" :labels="labels" @action="action"/>
		</div>
		<hb-dialog v-if="finalmsg !== ''"
				   @clk="e_en()">
			<span v-text="finalmsg"/>
		</hb-dialog>
	</div>
</template>

<script>
	import Lang from './lang'
	import Cleft from './left'
	import Cright from './right'
	import {phoneHandle, time} from '@d/qsoft'
	import {vpost, vlink} from '@api'
	import {Indicator} from 'mint-ui'

	export default {
		name: 'c2c',
		data() {
			return {
				labels: [],
				Lang,
				id: 1,
				selectedPage: 1,
				type: 0,
				apigetList: [],
				fvirtualcointypeList: [],
				finalmsg: '',
			}
		},
		components: {
			'c-left': Cleft,
			'c-right': Cright,
		},
		computed: {
			lang() {
				return this.$store.state.setting.lang
			},
		},
		created() {
			this.init()
		},
		mounted() {
		},

		methods: {
			//选择币种和买卖类型
			select(i) {
				this.id = i.id
				this.type = i.type
				this.selected(this.selectedPage)
			},
			action() {
				this.selected(this.selectedPage)
			},
			//选则页面
			selected(i) {
				this.selectedPage = i
				if (i == 1) {
					this.getDataList(this.type, this.id)
				} else if (i == 2) {
					this.getDataList2(this.type, this.id)
				} else if (i == 3) {
					this.getDataList3(this.type, this.id)
				}
			},
			handleList() {
				let l = this.apigetList
				l.map(v => {
					v[0] = phoneHandle(v[0])
					v[4] = time.t6(v[4])
				})
			},
			//初始化
			init() {
				Indicator.open()
				vpost(vlink.ddd.getCointypes).then(re => {
					Indicator.close()
					this.type = 0
					if (re != null && re.status === '1') {
						if (re.data.fvirtualcointype.length != 0) {
							this.fvirtualcointypeList = re.data.fvirtualcointype
							this.id = this.fvirtualcointypeList[0].value
							this.getDataList(0, this.id)
						} else {
							this.finalmsg = this.Lang.tradeClose[this.lang]
						}
					}
				})
			},
			//查看未成交的广告买卖  0:buy  1:sell
			getDataList(type, cointype) {
				let inputdate = {
					type: type,
					cointype: cointype,
				}
				Indicator.open()
				vpost(vlink.ddd.queryAdvertByCointype, inputdate).then(re => {
					Indicator.close()
					if (re != null && re.status === '1') {
						this.apigetList = re.data.pointOrderList
						this.labels = this.Lang.labels[this.lang]
					}
				})
			},

			//查看自己发布的广告 0:buy  1:sell
			getDataList2(type, cointype) {
				let inputdate = {
					fid: this.$store.state.user.uid,
					type: type == 0 ? 1 : 0,
					cointype: cointype,
				}
				Indicator.open()
				vpost(vlink.ddd.queryAdvertByUser, inputdate).then(re => {
					Indicator.close()
					if (re != null && re.status === '1') {
						this.apigetList = re.data.pointOrderList
						this.labels = this.Lang.titleHead[this.lang]
					}
				})
			},

			//查看自己的订单0 未完成  1：已完成
			getDataList3(type, cointype) {
				let inputdate = {
					fid: this.$store.state.user.uid,
					type: type == 0 ? 1 : 0,
					cointype: cointype,
				}
				Indicator.open()
				vpost(vlink.ddd.queryOrderBystatus, inputdate).then(re => {
					Indicator.close()
					if (re != null && re.status === '1') {
						this.apigetList = re.data.pointOrderFormSucList
						this.labels = this.Lang.orderHead[this.lang]
					}
				})
			},
			e_en() {
				this.finalmsg = ''
			},
		},
	}
</script>

<style scoped>
	.c2c {
		width: 1200px;
	}

	.main {
		height: 70vh;
	}

	.left {
		margin-right: 20px;
		width: 120px;
	}

	.right {
		flex-grow: 1;
	}

	.left,
	.right {
		overflow: hidden;
		border-radius: 4px;
		background-color: var(--bg2);
	}
</style>
